<template>
  <div :style="style">
    <slot></slot>
  </div>
</template>
<script>
  import view from './view.js'

  export default {
    name: 'v-div',
    componentName: 'v-div',
    mixins: [view],
    props: {
      desc: {
        type: String,
        default: 'v-div'
      }
    },
    install: function (Vue) {
      Vue.component('v-div', this)

    },
    computed: {
      style () {
        let prop = view.getStyle(this.$props, (val, attrName) => {
            if ('display' === attrName) {
              if (this.$props.direction) {
                val = 'flex'
              } else {
                val = ''
              }
            }
            return {
              attrName,
              val
            }
          }
        )
        console.log(prop)
        return prop
      }

    }
  }

</script>
